<template>
	<view class="content">

		<view class="tou">
			<image src="@/static/activity/lanternRiddles/top.png"></image>
		</view>
		<view class="title">
			<image src="../../../static/activity/lanternRiddles/title.png" mode=""></image>
		</view>

		<view class="djsm" v-if="timu.length <= 0">
			<image style="position: relative; width: 280rpx; height: 70rpx; margin-left: 40rpx;"
				src="@/static/activity/lanternRiddles/jixiang.png" mode=""></image>
			<button class="dianjism" @tap="scan">点我扫码</button>
		</view>

		<view class="timu" v-for="(item, idx) in timu" v-if="timu.length > 0">
			<!-- 单选、判断 -->
			<view class="top" v-if="item.question.type == 1 ||item.question.type == 3">
				<view class="timu1"> {{item.question.type == 1 ? '(单选)' : '(判断)'}} {{item.question.title}}</view>
				<view class="xuanxiang" v-for="(item1, idx1) in item.question.opt" @click="xuanzedan(item1.text)">
					<view class="dis">
						<view class="yuan"></view>
						<uni-icons class="gou" :style="item1.text == xuanle ? 'display: block;' : 'display: none;'"
							type="checkmarkempty" size="17" color="#307AFF"></uni-icons>
						<view class="zi">{{item1.text}}</view>
					</view>
				</view>
			</view>
			<!-- 多选 -->
			<view class="top" v-if="item.question.type == 2">
				<view class="timu1">(多选) {{item.question.title}}</view>
				<checkbox-group class="xuanxiang" style="margin-top: 10rpx;" @change="checkboxChange">
					<label class="dis" v-for="(item1, idx) in item.question.opt">
						<checkbox style="margin-top: 30rpx;" :value="item1.text" />
						<view class="zi" style="margin-top: 28rpx;">{{item1.text}}</view>
					</label>
				</checkbox-group>
			</view>
			<!-- 填空 -->
			<view class="top" v-if="item.question.type == 4">
				<view class="timu1">(填空) {{item.question.title}}</view>
				<view class="xuanxiang">
					<view class="dis">
						<view class="">答案</view>
						<input type="text" v-model="tiankong"
							style="border: 2px solid #C40A0C; padding: 18rpx; border-radius: 15rpx; margin-left: 10rpx;"
							placeholder="请输入答案" />
					</view>
				</view>
			</view>
		</view>

		<view class="dibu" v-if="timu.length > 0">

			<view class="jixiang">
				<image src="@/static/activity/lanternRiddles/jixiang.png" mode=""></image>
			</view>
			<view class="tijiao" v-if="count <= 0" @click="tijiao">提 交</view>

			<view class="tiezai">
				<image src="../../../static/activity/lanternRiddles/tiezai.png" mode=""></image>
			</view>
			<view class="ganghua">
				<image src="../../../static/activity/lanternRiddles/ganghua.png" mode=""></image>
			</view>

		</view>
	</view>
</template>

<script>
	const xwscan = uni.requireNativePlugin("xw-scan");
	export default {
		data() {
			return {
				user: null,
				token: null,
				timu: [],
				// timu: [{
				// 	"id": 1,
				// 	"name": "2025年柳钢之家春节猜灯谜试卷",
				// 	"created_at": "2025-01-23 17:28:16",
				// 	"updated_at": "2025-01-23 17:28:18",
				// 	"deleted_at": null,
				// 	"question": {
				// 		"id": 28,
				// 		"title": "某天突然发现自己的QQ号（微信号）无法登录了，怎么办？",
				// 		"type": 2,
				// 		"answer": [
				// 			"立即到官方网站找回",
				// 			"立即告诉亲朋好友，不要相信任何转账信息",
				// 			"找回QQ号（微信号）后，如果发现有转账转出记录马上拨打110报警"
				// 		],
				// 		"score": "1.00",
				// 		"paper_id": 1,
				// 		"created_at": null,
				// 		"updated_at": null,
				// 		"deleted_at": null,
				// 		"opt": [{
				// 			value: 0,
				// 			text: "立即到官方网站找回",
				// 		}, {
				// 			value: 1,
				// 			text: "立即告诉亲朋好友，不要相信任何转账信息",
				// 		}, {
				// 			value: 2,
				// 			text: "不理会，估计是软件平台问题，没准过几天就可以登录了",
				// 		}, {
				// 			value: 3,
				// 			text: "找回QQ号（微信号）后，如果发现有转账转出记录马上拨打110报警"
				// 		}]
				// 	}
				// }],
				xuanle: null,
				tiankong: null,
				duoxuan: [],
				count: 0,
			}
		},
		onLoad(opt) {
			this.user = uni.getStorageSync("member");
			if (opt.code) {
				this.loginx(opt.code);
			} else {
				this.token = uni.getStorageSync("lanternRiddlesToken")
			}
		},
		methods: {
			loginx(code) {
				let self = this
				console.log('code: ', code);
				self.$boya.Request({
					url: '/public/loginx',
					data: {
						code: code,
					}
				}, function(res) {
					console.log("loginx", res);
					if (res.code == 200) {
						self.token = res.data.token
						uni.setStorageSync("lanternRiddlesToken", res.data.token)
					} else {
						uni.showToast({
							title: '登录失败,请重试',
							duration: 2000,
							icon: 'error'
						});
					}
				}, false)
			},
			scan() {
				let self = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						// 2024：69b477f0-b9cd-11ee-ae1b-fa163ea92917
						// 2025：425f6c70-d3e4-11ef-b14e-fa163e344c3a
						if (res.result == '425f6c70-d3e4-11ef-b14e-fa163e344c3a') {
							self.scan_code();
						} else {
							uni.showToast({
								title: '二维码错误',
								duration: 2500,
								icon: 'error'
							});
						}
					}
				});
			},
			scan_code() {
				let self = this
				let headers = {
					'content-type': 'application/json'
				}
				uni.showLoading({
					title: '正在获取题目...'
				});
				uni.request({
					url: 'https://jf.lgwisdomunion.cn/api/exam/list',
					data: {
						name: '2025年柳钢之家春节猜灯谜活动',
						token: self.token
					},
					method: "POST",
					dataType: "json",
					header: headers,
					success: (res) => {
						console.log('saomadati: ', res);
						let shuju = res.data.data.paper
						for (var i = 0; i < shuju.length; i++) {
							let question = shuju[i].question
							question.opt = question.opt.map((value, index) => {
								return {
									value: index,
									text: value
								}
							});
						}
						self.timu = shuju
						uni.hideLoading();
						console.log('timu: ', self.timu)
					},
					fail: (err) => {
						console.log('err: ', err);
					}
				});
			},
			xuanzedan(text) {
				// console.log('数据：', text);
				this.xuanle = text
			},
			checkboxChange: function(e) {
				let shuju = this.timu
				this.duoxuan = []
				for (var i = 0; i < shuju.length; i++) {
					var items = shuju[i].question.opt,
						values = e.detail.value;
					for (var j = 0, lenI = items.length; j < lenI; ++j) {
						let item = items[j]
						if (values.includes(item.text)) {
							this.$set(item, 'checked', true)
						} else {
							this.$set(item, 'checked', false)
						}
						if (items[j].checked == true) {
							this.duoxuan.push(items[j].text)
							console.log(this.duoxuan);
						}
					}
					// console.log('duoxuan: ', items);
				}
			},
			tijiao() {
				let self = this
				uni.showLoading({
					title: '加载中'
				});
				self.count++
				let shuju = self.timu
				for (var i = 0; i < shuju.length; i++) {
					let for_data = {
						"question_id": shuju[i].question.id,
						"answers": '答案',
						"type": 'MCQ',
						"activity_name": '2025年柳钢之家春节猜灯谜活动',
						"token": self.token,
					};
					if (shuju[i].question.type == 1 || shuju[i].question.type == 3) {
						// 单选、判断
						if (!self.xuanle) {
							uni.showToast({
								title: '答案为空',
								duration: 2000,
								icon: 'error'
							});
							self.count--
							return
						} else {
							for_data.answers = self.xuanle
						}
					} else if (shuju[i].question.type == 2) {
						// 多选
						if (self.duoxuan.length <= 0) {
							uni.showToast({
								title: '答案为空',
								duration: 2000,
								icon: 'error'
							});
							self.count--
							return
						} else {
							for_data.answers = self.duoxuan.join(',')
						}
					} else if (shuju[i].question.type == 4) {
						if (!self.tiankong) {
							uni.showToast({
								title: '答案为空',
								duration: 2000,
								icon: 'error'
							});
							self.count--
							return
						} else {
							for_data.answers = self.tiankong
						}
					}

					console.log("for_data: ", for_data);

					let headers = {
						'content-type': 'application/json'
					}
					uni.request({
						url: 'https://jf.lgwisdomunion.cn/api/exam/correction',
						data: for_data,
						method: "POST",
						dataType: "json",
						header: headers,
						success: (res) => {
							uni.hideLoading();
							self.xuanle = null
							self.duoxuan = []
							self.tiankong = null
							console.log('shuju: ', res);
							if (res.data.data.is == true) {
								if (res.data.data.numbers < 2) {
									uni.showLoading({
										title: '正在确认答案，请稍后...'
									});
									let url = '/app/card_bag/coupon_add'
									let parm = {
										coupon_id: 172,
										status: 0,
										num: 1,
									}
									self.$boya.NPost(url, parm, function(res) {
										console.log("setAadd: ", res.data);
										uni.showModal({
											title: '回答正确',
											content: '恭喜您获得一张《幸福集会游园活动猜灯谜奖券》',
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													self.timu = []
													self.count--
													window.location.reload(true);
												}
											}
										});
									})
								} else {
									// 超过两次，领取已达上限
									uni.showModal({
										title: '回答正确，领取已达上限',
										content: '迎新年，庆团圆，祝你事事总如愿，一生幸福永平安!',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												self.timu = []
												self.count--
												window.location.reload(true);
											}
										}
									});
									return
								}
								return
							} else {
								uni.showModal({
									title: '提示',
									content: '回答错误',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											self.timu = []
											self.count--
											window.location.reload(true);
										}
									}
								});
								return
							}
						},
						fail: (err) => {
							console.log('err: ', err);
						}
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url('@/static/activity/lanternRiddles/bj.png') 100% 100% / 100% 100%;
		padding-bottom: 50rpx;
	}

	.tou {
		width: 100vw;
		height: 290rpx;
	}

	.tou>image {
		width: 100%;
		height: 100%;
	}

	.title {
		width: 80%;
		height: 100rpx;
		margin: 0 auto;
		margin-top: 25rpx;
	}

	.title>image {
		width: 100%;
		height: 100%;
	}

	.djsm {
		margin-top: 290rpx;
		text-align: center;
	}

	.dianjism {
		font-size: 38rpx;
		font-weight: bold;
		width: 250rpx;
		margin-left: 270rpx;
		background-color: #C0101A;
		color: white;
		box-shadow: 4rpx 4rpx 10rpx #F78C02;
	}

	.timu {
		width: 68%;
		height: 800rpx;
		margin: 0 auto;
		padding: 120rpx 90rpx;
		background: url('../../../static/activity/lanternRiddles/datiBj.png') 100% 100% / 100% 100%;
		margin-top: -45rpx;
	}

	.top {
		/* height: 500rpx;
		max-height: 500rpx;
		overflow: auto; */
		margin: 0 auto;
		color: #C40A0C;
		font-weight: bold;
	}

	.xuanxiang {
		margin-top: 30rpx;
	}

	.dis {
		display: flex;
		align-items: center;
	}

	.gou {
		/* position: absolute; */
		margin-left: -38rpx;
		margin-top: 10rpx;
	}

	.yuan {
		width: 38rpx;
		height: 38rpx;
		border: 1px solid #D5CAC1;
		background-color: white;
		border-radius: 50%;
		margin-left: 10rpx;
	}

	.zi {
		margin-left: 15rpx;
		width: 90%;
	}

	.dibu {
		margin-top: 30rpx;
		padding-bottom: 60rpx;
	}

	.jixiang {
		width: 320rpx;
		height: 75rpx;
		margin: 0 auto;
		margin-top: -70rpx;
	}

	.jixiang>image {
		width: 100%;
		height: 100%;
	}

	.tijiao {
		width: 200rpx;
		margin: 0 auto;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		border-radius: 25rpx;
		background-color: #FCE4C4;
		color: #CE2407;
		margin-top: 45rpx;
	}

	.tiezai,
	.ganghua {
		width: 220rpx;
		height: 400rpx;
		position: absolute;
		bottom: -40rpx;
	}

	.tiezai {
		left: 0;
	}

	.ganghua {
		right: 0;
	}

	.tiezai>image,
	.ganghua>image {
		width: 100%;
		height: 100%;
	}
</style>